<!DOCTYPE html>
<html>
    <head>
        <title>换肤2</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            *{margin: 0;padding:0px;list-style-type: none;}
            body{background-image: url("img/1.jpg");background-size: 100%;overflow: hidden;}
            p{width: 100%;height:50px;text-align: center;font-size: 32px;line-height: 50px;background: #000;color:#fff;margin: 0 auto;cursor: pointer;position: absolute;top:0;left:0;z-index: 1;overflow: hidden;}
            div{opacity: 0;width:100%;height: 100%;position: absolute;top:0;left:0;background: #000;}
            ul{width:960px;height:0;border:5px solid #fff;margin: 0 auto;position: absolute;top:50%;left:50%;margin:-135px 0 0 -480px;display: none;}
            ul li{ width:240px;height:135px;;float: left;overflow: hidden;} ul li img{width:100%;height: 100%;cursor:pointer; }
        </style>
    </head>
    <body>
        <p>点击我进行换肤！！！</p>
        <div></div>
        <ul>
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
            <li><img src="img/6.jpg" alt=""></li>
            <li><img src="img/7.jpg" alt=""></li>
            <li><img src="img/8.jpg" alt=""></li>
        </ul>
        
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $("p").click(function(){
                $("p").animate({"height":"0"},2000,function(){
                    $("div").animate({"opacity":"0.7"},2000,function(){
                        $("ul").css({"display":"block"}).animate({"height":"270"},2000);
                         $("ul").css({"height":"270"});
                    });
                });
            });
            $("ul li").click(function(){
               var as = $(this).children("img").attr("src");
               $("body").css({"background-image":"url("+as+')'});
            });
            $("div").click(function(){
              $("ul").animate({"height":"0"},2000,function(){
                 $("ul").hide();
              $("div").animate({"opacity":"0"},2000,function(){
                  $("p").animate({"height":"50"},2000);});
              });
            });
        </script>
    </body>
</html>
